<template>
  <div style="display: inline-block">
    <h2 align="center">个人信息</h2>
    <h2 align="left" style="margin-left: -400px">头像</h2> <img :src="userInfo.userPic" width="20px" height="20px" style="margin-left: 400px;margin-top: 20px" @click="changeImg">
    <h2 align="left" style="margin-left: -400px">昵称</h2> <span style="margin-left: 400px" @click="changeNickName">{{userInfo.nickName}}</span>
    <h2 align="left" style="margin-left: -400px">实名认证</h2> <span style="margin-left: 400px" @click="Verify">{{ verifyMsg }}</span>
    <h2 align="left" style="margin-left: -400px">登陆手机号</h2> <span style="margin-left: 400px" @click="changPhone">{{showPhone}}</span>

      <!-- 更换头像 -->
      <el-dialog title="更换头像" :visible.sync="dialogImgVisible">
          <el-upload
                  class="avatar-uploader"
                  action="http://localhost:18082/crud/user/uploadImg"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
              <img v-if="userInfo.userPic" :src="userInfo.userPic" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogImgVisible = false">取 消</el-button>
              <el-button type="primary" @click="ImgSubmit">确 定</el-button>
          </div>
      </el-dialog>

    <el-dialog title="更换昵称" :visible.sync="dialogNickNameVisible">
      <el-form>
        <el-form-item label="用户昵称">
          <el-input v-model="userInfo.nickName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogNickNameVisible = false">取 消</el-button>
        <el-button type="primary" @click="nickNameSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="更换手机号" :visible.sync="dialogPhoneVisible">
      <el-form>
        <el-form-item label="用户手机号">
          <el-input v-model="userInfo.phone"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPhoneVisible = false">取 消</el-button>
        <el-button type="primary" @click="phoneSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="实名认证" :visible.sync="dialogVerifyVisible">
      <el-form>
        <el-form-item label="用户银行卡号">
          <el-input v-model="BankVerify.cardNumber"></el-input>
        </el-form-item>
        <el-form-item label="持卡人">
          <el-input v-model="BankVerify.name"></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select v-model="value">
            <el-option label="身份证" value="身份证"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号">
          <el-input v-model="BankVerify.idNumber"></el-input>
        </el-form-item>
        <el-form-item label="银行预留手机号">
          <el-input v-model="BankVerify.phoneNumber"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVerifyVisible = false">取 消</el-button>
        <el-button type="primary" @click="verifySubmit">确 定</el-button>
      </div>
    </el-dialog>
    <div>
      <el-button @click="showRecord()" type="info" plain>贷款记录</el-button>
      <el-button @click="showInformation()" type="info" plain>还款信息</el-button>
      <el-button @click="signin()" type="info" plain>签到</el-button>
      <el-button @click="goLottery()" type="info" plain>抽奖</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "userDetails",
  data() {
    return {
      userInfo: {
        userId: '',
        userPic: '',
        nickName: '',
        phone: '',
        ifCertificated: ''
      },
      dialogImgVisible: false,
      dialogNickNameVisible: false,
      dialogPhoneVisible: false,
      dialogVerifyVisible: false,
      file: '',
      showPhone: '',
      BankVerify: {
        cardNumber: '',
        idNumber: '',
        name: '',
        phoneNumber: '',
        userId: ''
      },
      value: '',
      verifyMsg: '未实名'
    }
  },
  created() {
    this.getUserInfo();
  },
    methods: {
        getUserInfo() {
            this.$http.get('api/crud/user/getUserInfo?userId='+1).then( res => {
                console.log(res.data)
                if(res.data.statusCode == 2000){
                    console.log(res)
                    if(res.data.data.ifCertificated == 1){
                        this.verifyMsg = '已认证'
                    }
                    this.userInfo = res.data.data
                    this.showPhone = this.userInfo.phone.substring(0,3) + "****" + this.userInfo.phone.substring(7,11)
                }else{
                    console.log("出现异常");
                }
            })
        },
        changeImg() {
            this.dialogImgVisible = true;
        },
        ImgSubmit() {
            this.dialogImgVisible = false;
            this.$http.post('api/crud/user/changeHeadImg',this.userInfo).then( res => {
                console.log(res);
                this.getUserInfo();
            })
        },
        changeNickName(){
            this.dialogNickNameVisible = true;
        },
        nickNameSubmit() {
            this.dialogNickNameVisible = false;
            this.$http.post('api/crud/user/changeNickName',this.userInfo).then( res => {
                console.log(res);
                this.getUserInfo();
            })
        },
        Verify() {
            //if(this.userInfo.ifCertificated == 0){
            this.dialogVerifyVisible= true;
            //}
        },
        verifySubmit() {
            this.dialogVerifyVisible= false;
            this.BankVerify.userId = this.userInfo.userId
            this.$http.post('api/crud/bankcard/verifyCard',this.BankVerify).then( res => {
                console.log("============>",res)
                if(res.data.statusCode == 2000){
                    this.verifyMsg = '认证成功'
                    this.BankVerify = {}
                    this.$router.push('/registerFace')
                }
            })
        },
        changPhone() {
            this.dialogPhoneVisible = true;
        },
        phoneSubmit() {
            this.dialogPhoneVisible = false;
            this.$http.post('api/crud/user/changePhone',this.userInfo).then( res => {
                console.log(res);
                this.getUserInfo();
            })
        },
        handleAvatarSuccess(res) {
            this.userInfo.userPic = res.data
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        // 贷款数据
        showRecord(){
            this.$router.push('/BorrowerList')
        },
        // 还款信息
        showInformation(){
            this.$router.push({
                path:'/Repayment',
                query:{
                    routerStatus:1
                }
            })
        },
        // 签到
        signin(){
            this.$router.push({
                path:'/signIn',
                query:{
                    userId:1
                }
            })
        },
        // 抽奖
        goLottery(){
            this.$router.push({
                path:'/lottery',
                query:{
                    userId:1
                }
            })
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
